<template>
  <div :class="{ disabled }">
    <a-input-search
      :placeholder="`${t['商品名称']},${t['条形码']},${t['部门']}`"
      v-model="query.keyword"
      @keydown.enter="search"
      allow-clear
      @search="search"
      class="mb-2"
    />
    <a-table
      v-model:selected-keys="selected"
      :data="table.data"
      row-key="goodsId"
      size="mini"
      :scroll="{
        x: 320
      }"
      :columns="translateColumns(columns)"
      :pagination="{
        pageSize: query.pageSize,
        current: query.pageNum,
        total: query.total
      }"
      :row-selection="{ type: 'radio' }"
      @page-change="pageChange"
      @cell-click="cellClick"
      @select="onChange"
    >
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { listGoods } from "@/api/service/goods/goods";
import { Goods } from "@/api/service/goods/types";
import { IQuery } from "@/interface/IAxios";

const t = translate("公共模块");
const emit = defineEmits(["cellClick"]);

const selected = defineModel<string[]>("keys");
const queryObject: IQuery = {
  pageNum: 1,
  pageSize: 20,
  total: 0,
  orderByColumn: "goods_id",
  keyword: "",
  isAsc: "desc",
  mType: [0, 1, 2, 3, 4]
};

const columns = [
  { title: "商品名称", dataIndex: "goodsName" },
  { title: "零售价", dataIndex: "retailPrice" },
  {
    title: "计价单位",
    dataIndex: "salesUnit"
  }
];

const table = useTable<Goods>();
const query = ref({
  ...queryObject
});
defineProps<{
  disabled?: boolean;
  multiple?: boolean;
}>();

const search = () => {
  query.value.pageNum = 1;
  getList();
};
const getList = async () => {
  const data = await listGoods(query.value);
  table.value.data = data.rows;
  query.value.total = data.total;
};
onMounted(() => {
  getList();
});
const pageChange = (index: number) => {
  query.value.pageNum = index;
  getList();
};

const cellClick = (record: Goods) => {
  selected.value = [record.goodsId];
  emit("cellClick", record);
};
const onChange = (_: any, __: any, record: Goods) => {
  // emit("cellClick", record);
  emit("cellClick", record);
};
</script>

<style lang="scss" scoped>
.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
</style>
